<!DOCTYPE html>
<html lang="en">
<head>

	<title>Components - Top Headers</title>

	<!-- Required meta tags always come first -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="x-ua-compatible" content="ie=edge">


	<!-- Bootstrap CSS -->
	<link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap-reboot.css">
	<link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap-grid.css">

	<!-- Main Styles CSS -->
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<link rel="stylesheet" type="text/css" href="css/fonts.min.css">

	<!-- Main Font -->
	<script src="js/libs/webfontloader.min.js"></script>
	<script>
		WebFont.load({
			google: {
				families: ['Roboto:300,400,500,700:latin']
			}
		});
	</script>


</head>
<body>


<!-- Preloader -->

<div id="hellopreloader">
	<div class="preloader">
		<svg width="45" height="45" stroke="#fff">
			<g fill="none" fill-rule="evenodd" stroke-width="2" transform="translate(1 1)">
				<circle cx="22" cy="22" r="6" stroke="none">
					<animate attributeName="r" begin="1.5s" calcMode="linear" dur="3s" repeatCount="indefinite" values="6;22"/>
					<animate attributeName="stroke-opacity" begin="1.5s" calcMode="linear" dur="3s" repeatCount="indefinite" values="1;0"/>
					<animate attributeName="stroke-width" begin="1.5s" calcMode="linear" dur="3s" repeatCount="indefinite" values="2;0"/>
				</circle>
				<circle cx="22" cy="22" r="6" stroke="none">
					<animate attributeName="r" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite" values="6;22"/>
					<animate attributeName="stroke-opacity" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite" values="1;0"/>
					<animate attributeName="stroke-width" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite" values="2;0"/>
				</circle>
				<circle cx="22" cy="22" r="8">
					<animate attributeName="r" begin="0s" calcMode="linear" dur="1.5s" repeatCount="indefinite" values="6;1;2;3;4;5;6"/>
				</circle>
			</g>
		</svg>

		<div class="text">Loading ...</div>
	</div>
</div>

<!-- ... end Preloader -->
<div class="container">
	<div class="row">

		<div class="col col-xl-12 col-12">
			<h2 class="presentation-margin">Top Headers</h2>
		</div>

		
		
		<!-- Top Header-Profile -->
		
		<div class="container">
			<div class="row">
				<div class="col col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
					<div class="ui-block">
						<div class="top-header">
							<div class="top-header-thumb">
								<img src="img/top-header1.jpg" alt="nature">
							</div>
							<div class="profile-section">
								<div class="row">
									<div class="col col-lg-5 col-md-5 col-sm-12 col-12">
										<ul class="profile-menu">
											<li>
												<a href="02-ProfilePage.html" class="active">Timeline</a>
											</li>
											<li>
												<a href="05-ProfilePage-About.html">About</a>
											</li>
											<li>
												<a href="ProfilePageWithFriends.html">Friends</a>
											</li>
										</ul>
									</div>
									<div class="col col-lg-5 ml-auto col-md-5 col-sm-12 col-12">
										<ul class="profile-menu">
											<li>
												<a href="07-ProfilePage-Photos.html">Photos</a>
											</li>
											<li>
												<a href="09-ProfilePage-Videos.html">Videos</a>
											</li>
											<li>
												<div class="more">
													<svg class="olymp-three-dots-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use></svg>
													<ul class="more-dropdown more-with-triangle">
														<li>
															<a href="#">Report Profile</a>
														</li>
														<li>
															<a href="#">Block Profile</a>
														</li>
													</ul>
												</div>
											</li>
										</ul>
									</div>
								</div>
		
								<div class="control-block-button">
									<a href="35-YourAccount-FriendsRequests.html" class="btn btn-control bg-blue">
										<svg class="olymp-happy-face-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use></svg>
									</a>
		
									<a href="#" class="btn btn-control bg-purple">
										<svg class="olymp-chat---messages-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-chat---messages-icon"></use></svg>
									</a>
		
									<div class="btn btn-control bg-primary more">
										<svg class="olymp-settings-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-settings-icon"></use></svg>
		
										<ul class="more-dropdown more-with-triangle triangle-bottom-right">
											<li>
												<a href="#" data-toggle="modal" data-target="#update-header-photo">Update Profile Photo</a>
											</li>
											<li>
												<a href="#" data-toggle="modal" data-target="#update-header-photo">Update Header Photo</a>
											</li>
											<li>
												<a href="accountSettings.html">Account Settings</a>
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="top-header-author">
								<a href="02-ProfilePage.html" class="author-thumb">
									<img src="img/author-main1.jpg" alt="author">
								</a>
								<div class="author-content">
									<a href="02-ProfilePage.html" class="h4 author-name">James Spiegel</a>
									<div class="country">San Francisco, CA</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- ... end Top Header-Profile -->
		
		
		<div class="container">
			<div class="row">
				<div class="col col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
					<div class="ui-block">
						<div class="top-header top-header-favorit">
							<div class="top-header-thumb">
								<img src="img/top-header2.jpg" alt="nature">
								<div class="top-header-author">
									<div class="author-thumb">
										<img src="img/author-main2.jpg" alt="author">
									</div>
									<div class="author-content">
										<a href="#" class="h3 author-name">Green Goo Rock</a>
										<div class="country">Rock Band  |  San Francisco, CA</div>
									</div>
								</div>
							</div>
							<div class="profile-section">
								<div class="row">
									<div class="col col-xl-8 m-auto col-lg-8 col-md-12">
										<ul class="profile-menu">
											<li>
												<a href="12-FavouritePage.html" class="active">Timeline</a>
											</li>
											<li>
												<a href="13-FavouritePage-About.html">About</a>
											</li>
											<li>
												<a href="07-ProfilePage-Photos.html">Photos</a>
											</li>
											<li>
												<a href="09-ProfilePage-Videos.html">Videos</a>
											</li>
											<li>
												<a href="14-FavouritePage-Statistics.html">Statistics</a>
											</li>
											<li>
												<a href="15-FavouritePage-Events.html">Events</a>
											</li>
										</ul>
									</div>
								</div>
		
								<div class="control-block-button">
									<a href="#" class="btn btn-control bg-primary">
										<svg class="olymp-star-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-star-icon"></use></svg>
									</a>
		
									<a href="#" class="btn btn-control bg-purple">
										<svg class="olymp-chat---messages-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-chat---messages-icon"></use></svg>
									</a>
		
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		

	</div>
</div>




<a class="back-to-top" href="#">
	<img src="svg-icons/back-to-top.svg" alt="arrow" class="back-icon">
</a>


<!-- JS Scripts -->
<script src="js/jQuery/jquery-3.4.1.js"></script>
<script src="js/libs/jquery.appear.js"></script>
<script src="js/libs/jquery.mousewheel.js"></script>
<script src="js/libs/perfect-scrollbar.js"></script>
<script src="js/libs/jquery.matchHeight.js"></script>
<script src="js/libs/svgxuse.js"></script>
<script src="js/libs/imagesloaded.pkgd.js"></script>
<script src="js/libs/Headroom.js"></script>
<script src="js/libs/velocity.js"></script>
<script src="js/libs/ScrollMagic.js"></script>
<script src="js/libs/jquery.waypoints.js"></script>
<script src="js/libs/jquery.countTo.js"></script>
<script src="js/libs/popper.min.js"></script>
<script src="js/libs/material.min.js"></script>
<script src="js/libs/bootstrap-select.js"></script>
<script src="js/libs/smooth-scroll.js"></script>
<script src="js/libs/selectize.js"></script>
<script src="js/libs/swiper.jquery.js"></script>
<script src="js/libs/moment.js"></script>
<script src="js/libs/daterangepicker.js"></script>
<script src="js/libs/fullcalendar.js"></script>
<script src="js/libs/isotope.pkgd.js"></script>
<script src="js/libs/ajax-pagination.js"></script>
<script src="js/libs/Chart.js"></script>
<script src="js/libs/chartjs-plugin-deferred.js"></script>
<script src="js/libs/circle-progress.js"></script>
<script src="js/libs/loader.js"></script>
<script src="js/libs/run-chart.js"></script>
<script src="js/libs/jquery.magnific-popup.js"></script>
<script src="js/libs/jquery.gifplayer.js"></script>
<script src="js/libs/mediaelement-and-player.js"></script>
<script src="js/libs/mediaelement-playlist-plugin.min.js"></script>
<script src="js/libs/ion.rangeSlider.js"></script>

<script src="js/main.js"></script>
<script src="js/libs-init/libs-init.js"></script>
<script defer src="fonts/fontawesome-all.js"></script>

<script src="Bootstrap/dist/js/bootstrap.bundle.js"></script>

</body>
</html>